import React, { Component, createRef } from 'react'
import { Form, Input, Button, message } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import Cookies from 'js-cookie'

import logo from '../../assets/image/logo.png'
import { reqGetToken } from '../../api'
import { handleErr } from '../../utils'

import './index.less'

//登录页
export default class Login extends Component {

    myRef = createRef()

    state = {
        loading: false
    }

    //loading变更
    changeLoading = (isLoading) => {
        this.setState({
            loading: isLoading
        })
    }

    componentDidMount() {
        this.myRef.current.focus()
    }
    

    //校验
    checkValues = (values) => {
        const { idNum } = values
        if(!idNum.trim()){
            message.error('请输入您的身份证号!')
            return false
        }

        let idCardReg = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/
        if(!idCardReg.test(idNum.trim())){
            message.error('请输入正确的身份证号!')
            return false
        }

        return true
    }

    //登陆
    onFinish = async (values) => {
        if(!this.checkValues(values)) return

        const { idNum } = values
        this.changeLoading(true)
        try {
            const res = await reqGetToken({ idNum: idNum.trim(), _t: new Date().getTime() })
            const { success, msg, response } = res.data
            
            if(success) {
                message.success(msg)
                Cookies.set('answerToken', response.token)
                // localStorage.setItem('answerToken', response.token)
                this.props.history.replace('/admin')
            }else {
                message.error(msg)
                this.changeLoading(false)
            }
        } catch (err) {
            this.changeLoading(false)
            handleErr(err)
        }
    }

    onFinishFailed = (errorInfo) => {
        console.log('Failed: :>> ', errorInfo)
    }

    componentWillUnmount() {
        this.changeLoading(false)
    }

    render() {
        const { loading } = this.state

        return (
            <div className='login'>
                {/* <div className="bg"></div> */}
                <header className='header'>
                    <img src={logo} alt='logo' />
                    <h1>微盟电子 在线考试系统</h1>
                </header>
                <section className='content'>
                    <h2>用户登录</h2>
                    <Form
                        initialValues={{
                            idNum: ''
                        }}
                        layout='vertical'
                        autoComplete='off'
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                        
                    >
                        <Form.Item
                            name='idNum'
                            rules={[
                                {
                                    required: true,
                                    message: '请输入您的身份证号!'
                                }
                            ]}
                            style={{ margin: '63px 0' }}
                        >
                            <Input 
                                ref={this.myRef}
                                size='large'
                                addonBefore={<UserOutlined />}
                                placeholder='请输入您的身份证号'
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button className='my-login-btn' type='primary' block htmlType='submit' loading={loading} >{loading ? '登陆中' : '登陆'}</Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
        )
    }
}